<template>
  <div>
    <div v-if="this.axisOption.rows.length == 0" style="height: 400px"></div>
    <ve-histogram
      v-if="this.axisOption.rows.length != 0"
      :data="axisOption"
      :extend="chartExtend"
      ref="table"
      :events="chartPEvents"
    ></ve-histogram>
  </div>
</template>
<script>
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },

  data() {
    const _this = this;
    // 饼图点击事件
    this.chartPEvents = {
      click: function (e) {
        _this.getNotChartData(e);
      },
    };
    // :colors="colors"
    // this.colors = ['#03C8D5', '#40A9F5'];
    //
    // this.chartSettings = {
    //     yAxisType: ['0.[00]a', '0.[00]%'],
    //     axisSite: {
    //         right: []
    //         // '下单率'
    //     },
    //     yAxisName: ['数值轴', '比率轴']
    // },
    return {
      // chartOptions: {
      //     series: [{
      //         type: 'line',
      //         // data: [1, 2, 3, 4, 5],
      //         lineStyle: {
      //             color: '#36a3f7'
      //         }
      //     }]
      // },
      chartSettings: {
        // 0,0

        // yAxisType: ['0.[00]a', '0.[00]%'],
        yAxisType: ["0,0", "0.[00]%"],
        // axisLabel: {
        //     formatter: function (value) {
        //         return value / 10000 + 'w';
        //     }
        //     // }
        // },
        axisSite: {
          right: [],
          // '下单率'
        },
        // yAxisName: ['数值轴']
        // yAxisName: ["数值轴", "比率轴"],
      },
      axisOption: {
        // columns: ['日期', '访问用户', '下单用户', '下单率'],
        // rows: [
        //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        // ]
      },
    };
  },
  // computed: {
  //     axisOption() {
  //         return this.chartData
  //     }
  // },
  watch: {
    chartData: {
      handler: function (newnew, oldold) {
        this.axisOption.columns = [];
        this.axisOption.rows = [];
        // this.chartSettings.axisSite.right = [];
        // this.chartSettings.showLine = [];
        // console.log(JSON.stringify(newnew));
        // this.echartDataSku.columns.forEach((item) => {
        //   if (item.includes("同比")) {
        //     return;
        //     this.chartSettings.axisSite.right.push(item);
        //     this.chartSettings.showLine.push(item);
        //     // if (item.includes("连带率")) {
        //     //   this.chartSettings.axisSite.right = [];
        //     //   this.axisOption = newnew;
        //     //   // this.axisOption.columns = this.chartData.columns
        //     // }
        //   } else {
        //     // this.chartSettings.axisSite.right = [];
        //     // this.axisOption = newnew;
        //     this.axisOption.columns.push(item);
        //   }
        // });
        // this.axisOption.columns = this.chartData.columns;
        // this.axisOption.rows = this.chartData.rows;

        // this.axisOption.rows = this.chartData.rows
        this.initChart();
        // this.axisOption = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        // console.log(new Date());
        this.$nextTick(() => {
          // this.$refs.table.doLayout();
          this.$refs.table.echarts.resize();
          // console.log('渲染完成时间', new Date());
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getNotChartData(e) {
      console.log(e.name);
      // return;
      this.$emit("vchartData", e.name);
    },
    initChart() {
      this.axisOption = this.chartData;
      this.chartExtend = {
        series(v) {
          v.forEach((i) => {
            i.barWidth = 25;
            i.barGap = 0;
            i.itemStyle = {
              normal: {
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    "#19d4ae",
                    "#ff7070",
                    "#E87C25",
                    "#27727B",
                    "#FE8463",
                    "#9BCA63",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",
                    "#D7504B",
                    "#C6E579",
                    "#F4E001",
                    "#F0805A",
                    "#26C0C0",
                    "#19d4ae",
                    "#ff7070",
                    "#E87C25",
                    "#27727B",
                    "#FE8463",
                    "#9BCA63",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",
                    "#D7504B",
                    "#C6E579",
                    "#F4E001",
                    "#F0805A",
                    "#26C0C0",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            };
          });
          return v;
        },
        xAxis(v) {
          v.forEach((i) => {
            i.show = true;
            i.splitLine = { show: false };
            i.axisTick = { show: true };
            i.axisLine = { show: true };
            i.axisLabel = {
              margin: 15,
              interval: 0,
              rotate: 30,
            };
          });
          return v;
        },
      };
    },
  },
};
</script>
